<template>
  <a-modal :maskClosable="false" :title="title" centered :width="500" v-model="visible" @ok="handleSubmit">
    <a-form-model
      ref="companyForm"
      :model="companyForm"
      :rules="rules"
      :labelCol="{ span: 6 }"
      :wrapperCol="{ span: 17 }"
    >
      <a-form-model-item label="单位LOGO" prop="logo">
        <UploadImg v-model="companyForm.logo" warehouse cropper />
      </a-form-model-item>
      <a-form-model-item label="单位名称" prop="name">
        <a-input placeholder="请输入单位名称" v-model="companyForm.name" />
      </a-form-model-item>
      <a-form-model-item label="单位职务">
        <a-input placeholder="请输入单位职务" v-model="companyForm.position" />
      </a-form-model-item>
      <a-form-model-item label="单位地址">
        <div>
          <a-button type="primary" @click="handleChangeAddress">选择地址</a-button>
          <div v-if="companyForm.addressStr" class="linh-20 _pt-10">
            <div>经度：{{ longitude }}</div>
            <div>纬度：{{ latitude }}</div>
            <div>地址：{{ address }}</div>
          </div>
        </div>
      </a-form-model-item>
    </a-form-model>

    <MapBox ref="mapBox" :infoData="{ longitude, latitude, address }" @ok="handleMapOk" />
  </a-modal>
</template>

<script>
import UploadImg from '@/components/UpFile/uploadImg'
import { addUserCompanies, editUserCompanies } from '@/api/member/user'
import MapBox from '@/components/map'

export default {
  components: {
    UploadImg,
    MapBox
  },
  data() {
    return {
      title: '新增单位',
      visible: false,
      companyForm: {},
      rules: {
        name: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }]
      },
      address: '', // 位置信息
      longitude: '',
      latitude: ''
    }
  },
  methods: {
    show(appUserInfoId, row) {
      Object.assign(this.$data.companyForm, this.$options.data().companyForm) // 重置数据

      this.visible = true
      this.title = row ? '编辑单位' : '新增单位'

      this.companyForm = {
        appUserInfoId: appUserInfoId,
        id: row ? row.id : undefined,
        logo: row ? row.logo : undefined, // 单位LOGO
        name: row ? row.name : undefined, // 单位名称
        position: row ? row.position : undefined, // 单位职务
        authentication: row ? row.authentication : false, // 是否为已认证单位
        addressStr: row ? row.addressStr : '' // 单位地址
      }
      if (row && row.addressStr) {
        const mapArr = row.addressStr.split(',')
        this.longitude = mapArr[0]
        this.latitude = mapArr[1]
        this.address = mapArr[2]
      }

      this.$nextTick(() => {
        this.$refs.companyForm.clearValidate()
      })
    },
    handleChangeAddress() {
      this.$refs.mapBox.show()
    },
    handleMapOk(data) {
      this.longitude = data.longitude
      this.latitude = data.latitude
      this.address = data.address

      let content = [this.longitude, this.latitude, this.address, ' ']
      this.companyForm.addressStr = content.join(',')
      this.$refs.companyForm.validateField('addressStr')
    },
    handleSubmit() {
      this.$refs.companyForm.validate(valid => {
        if (valid) {
          if (this.companyForm.id) {
            editUserCompanies(this.companyForm).then(res => {
              this.$emit('refresh') // 刷新单位列表
              this.$message.success('编辑成功')
              this.visible = false
            })
          } else {
            addUserCompanies(this.companyForm).then(res => {
              this.$emit('refresh') // 刷新单位列表
              this.$message.success('新增成功')
              this.visible = false
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
